<template>
  <cover-view
    class="toast"
    v-if="isShow"
  >
    {{ msg }}
  </cover-view>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      msg: ""
    };
  },

  methods: {
    show(msg) {
      var _this = this;
      this.msg = msg;
      this.isShow = true;
      setTimeout(function() {
        _this.isShow = false;
        _this.msg = "";
      }, 3000);
    }
  }
};
</script>

<style scoped>
.toast {
  width: fit-content;
  /* width: auto; */
  max-width: 60%;
  height: auto;
  word-wrap: break-word;
  word-break: break-all;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  position: fixed;
  top: 40%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  z-index: 9999;
}
</style>
